<template>
  <t-dialog v-model:visible="visibleModel" :header="`${props.name} - QR码`" :cancel-btn="null" :confirm-btn="null">
    <div class="qr-wrapper">
      <t-qrcode :value="props.id" class="qr-code" level="H" />
      <div class="qr-content">
        {{ props.id }}<div />
      </div>
    </div>
  </t-dialog>
</template>
<script setup lang="ts">
const props = defineProps<{ id: string, name: string }>()
const visibleModel = defineModel('visible', { type: Boolean })
</script>
<style scoped>
.qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-content {
  margin-top: 10px;
}
</style>
